<template>
  <view class="u-p-20 u-flex-y-center">
    <u-text text="取消" @click="closeRegion" color="#999" size="14"></u-text>
    <u-text text="确认" @click="confirmRegion" color="#3c9cff" size="14" align="right"> </u-text>
  </view>
  <view class="u-flex-y-center u-p-l-30 u-p-r-30">
    <u-text color="#333" bold size="14" margin="0 15rpx" :text="data.province_text"></u-text>
    <u-text color="#333" bold size="14" margin="0 15rpx" :text="data.city_text"></u-text>
    <!-- <u-text color="#333" bold size="14" margin="0 15rpx" :text="data.area_text"></u-text> -->
  </view>
  <view class="u-flex u-flex-items-start u-p-t-20 u-p-l-30 u-p-r-30" style="height: 600rpx;">
    <scroll-view scroll-y class="u-flex-1 scroll-item">
      <view class="u-flex-y-center u-flex-between region-item" @click="changeItem('firstIndex',index)"
        v-for="(item,index) in data.provinceList" :key="item.id">
        <text class="u-flex-y-center">{{item.name}}</text>
        <u-icon name="checkbox-mark" v-if="data.firstIndex == index" size="15px" color="#3c9cff"></u-icon>
      </view>
    </scroll-view>
    <scroll-view scroll-y class="u-flex-1 scroll-item">
      <view class="u-flex-y-center u-flex-between region-item" @click="changeItem('secondIndex',index)"
        v-for="(item,index) in data.cityList" :key="item.id">
        <text class="u-flex-y-center"> {{item.name}}</text>
        <u-icon name="checkbox-mark" v-if="data.secondIndex == index" size="15px" color="#3c9cff"></u-icon>
      </view>
    </scroll-view>
<!--    <scroll-view scroll-y class="u-flex-1 scroll-item">
      <view class="u-flex-y-center u-flex-between region-item" @click="changeItem('thirdIndex',index)"
        v-for="(item,index) in data.areaList" :key="item.id">
        <text class="u-flex-y-center">{{item.name}}</text>
        <u-icon name="checkbox-mark" v-if="data.thirdIndex == index" size="15px" color="#3c9cff"></u-icon>
      </view>
    </scroll-view> -->
  </view>
</template>

<script setup>
  import {
    computed,
    onMounted,
    ref,
    watchEffect
  } from 'vue'
import { cityList } from '../../config/api';
  const emit = defineEmits(['closeRegion', 'confirmRegion'])
  const props = defineProps({
    regionShow: {
      type: Boolean,
      default: false
    }
  })
  const data = ref({
    firstIndex: null,
    secondIndex: null,
    thirdIndex: null,
    provinceList: [],
    cityList: [],
    areaList: [],
    province_text: computed(() => data.value.provinceList[data.value.firstIndex]?.name ?? '请选择'),
    city_text: computed(() => data.value.cityList[data.value.secondIndex]?.name ?? '请选择'),
    area_text: computed(() => data.value.areaList[data.value.thirdIndex]?.name ?? '请选择')
  })
  watchEffect(() => {
    if (props.regionShow) {
      data.value.firstIndex = null
      data.value.secondIndex = null
      data.value.thirdIndex = null
      data.value.cityList = []
      data.value.areaList = []
    }
  })
  onMounted(() => {
    _region()
  })
  // 确认
  const confirmRegion = () => {
    if (data.value.secondIndex == null) {
      uni.$u.toast('请选择省市区')
      return
    }
    let row = {
      province_id: data.value.provinceList[data.value.firstIndex]?.id,
      city_id: data.value.cityList[data.value.secondIndex]?.id,
      // district_id: data.value.areaList[data.value.thirdIndex]?.id,
      province_text: data.value.province_text,
      city_text: data.value.city_text,
      // district_text: data.value.area_text,
    }
    emit('confirmRegion', row)
    closeRegion()
  }
  // 关闭弹框
  const closeRegion = () => {
    emit("closeRegion")
  }
  // 选择城市
  const changeItem = (key, value) => {
    data.value[key] = value
    if (key == "firstIndex") {
      _region(data.value.provinceList[value].id, 2)
      data.value.areaList = []
      data.value.cityList = []
      data.value.secondIndex = null
      data.value.thirdIndex = null
    }
    // if (key == "secondIndex") {
    //   _region(data.value.cityList[value].id, 3)
    //   data.value.areaList = []
    //   data.value.thirdIndex = null
    // }
  }
  // 获取地区
  const _region = (pid, level = 1) => {
    cityList({p_id: pid }).then(res => {
      if (level == 1) data.value.provinceList = res.data
      if (level == 2) data.value.cityList = res.data
      if (level == 3) data.value.areaList = res.data
    })
  }
</script>

<style lang="scss" scoped>
  .scroll-item {
    height: 100%;
    padding: 0 15rpx;

    .region-item {
      height: 80rpx;

      color: #666;
      font-size: 28rpx;
    }
  }
</style>